Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: blog: Differences between linting and type checking #664

Open
wants to merge 25 commits into
base: main
Choose a base branch
from

Conversation

JoshuaKGoldberg
Copy link
Contributor

@JoshuaKGoldberg JoshuaKGoldberg commented Nov 26, 2024

Prerequisites checklist

What is the purpose of this pull request?

Adds the blog post per #663.

What changes did you make? (Give an overview)

The post explains:

  1. The terminology difference between the two within "static analysis"
  2. Their differences in purpose: "can" vs. "should" 🧑‍🔬
  3. How linters are more granularly extensible with plugin rules
  4. Notes on their areas of overlap, with a suggestion to use linting only instead of TypeScript's noUnusedLocals and noUnusedParameters
  5. How linters and type checkers benefit from each other

In adding myself as an author, I noticed there wasn't yet support for Bluesky URLs. So I added that in too. I can split that out if preferred.

Related Issues

Fixes #663.

Is there anything you'd like reviewers to focus on?

  • Is this too long a post for its intended purpose of convincing folks that using ESLint with TypeScript is beneficial?
  • This title is not very emphatic - would it be better to go with a more punchy one? I'm drawing a blank.
  • On the other hand, I worry that the phrasing is a bit ... sales-y? for typescript-eslint. My personal biases might be showing 🙂.
  • I also commented some questions inline about whether we can visualize rich code blocks nicely

Co-authored-by: @nzakas

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for es-eslint ready!

Name Link
🔨 Latest commit 3c6d7d4
🔍 Latest deploy log https://app.netlify.com/sites/es-eslint/deploys/678aae7269ffa8000880ed69
😎 Deploy Preview https://deploy-preview-664--es-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for ja-eslint ready!

Name Link
🔨 Latest commit 3c6d7d4
🔍 Latest deploy log https://app.netlify.com/sites/ja-eslint/deploys/678aae722f6890000832c50e
😎 Deploy Preview https://deploy-preview-664--ja-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for new-eslint ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 3c6d7d4
🔍 Latest deploy log https://app.netlify.com/sites/new-eslint/deploys/678aae72ad322100084e9b8e
😎 Deploy Preview https://deploy-preview-664--new-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for hi-eslint ready!

Name Link
🔨 Latest commit 3c6d7d4
🔍 Latest deploy log https://app.netlify.com/sites/hi-eslint/deploys/678aae724120020008c41d2e
😎 Deploy Preview https://deploy-preview-664--hi-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for zh-hans-eslint ready!

Name Link
🔨 Latest commit 3c6d7d4
🔍 Latest deploy log https://app.netlify.com/sites/zh-hans-eslint/deploys/678aae7279105a00081022cf
😎 Deploy Preview https://deploy-preview-664--zh-hans-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for fr-eslint ready!

Name Link
🔨 Latest commit 3c6d7d4
🔍 Latest deploy log https://app.netlify.com/sites/fr-eslint/deploys/678aae72960e5200087ea55e
😎 Deploy Preview https://deploy-preview-664--fr-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for de-eslint ready!

Name Link
🔨 Latest commit 3c6d7d4
🔍 Latest deploy log https://app.netlify.com/sites/de-eslint/deploys/678aae72013ae600086c9d0e
😎 Deploy Preview https://deploy-preview-664--de-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 26, 2024

Deploy Preview for pt-br-eslint ready!

Name Link
🔨 Latest commit 3c6d7d4
🔍 Latest deploy log https://app.netlify.com/sites/pt-br-eslint/deploys/678aae725a97cd000809c266
😎 Deploy Preview https://deploy-preview-664--pt-br-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ran out of time so just left some comments on the first bits. Overall, I think we need to work on clearing up the language and the message. I'll continue looking tomorrow.

I'd also like to pull out adding support Bluesky social links into a separate PR as it's not really related to the article.

2. **Linters**: execute individually configurable checks known as "lint rules"
3. **Type checkers**: collect all files into a full understanding of the project

We'll focus in this blog post on *linters*, namely ESLint, and *type checkers*, namely [TypeScript](https://typescriptlang.org).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we might want to expand this section a bit because both ESLint and TypeScript do more than one type of static analysis. For instance, ESLint also does scope analysis and code path analysis, while TypeScript does linting, scope analysis, and type checking.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 what would the benefit of that be? Now that the following section reports examples of each, what's the new info we'd want readers to know going in?

Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After taking another look at this, I see two areas of improvement for this post:

  1. You need to decide whether you are talking about linters and type checkers generically, or ESLint and TypeScript, specifically. My recommendation is update the intro to talk about ESLint and TypeScript, take a step back to talk about what static analysis is generically, then explain which types ESLint and TypeScript use, and then continue on the rest of the blog post specifically talking about ESLint and TypeScript.
  2. Make sure to include examples when you're describing abstract concepts. A lot of the verbiage around static analysis will be unfamiliar to most readers (including "type-safe"), so grounding those descriptions with concrete examples is important.

Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking a lot better. There is still some ambiguity over when we're talking about linters vs. ESLint itself, and I think we need to be careful about making claims about TypeScript does because it does more than just type checking.

Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left suggestions throughout to clean up wording, simplify phrasing, and add more detail where I thought it was missing.

A couple high-level comments to pull out:

  1. I think this is really more about using ESLint and TypeScript together rather than the differences between a linter and a type checker. I think the title should reflect that. I made edits where I thought this line was getting blurry.
  2. Please go back through and ensure each section follows the same sequence of discussing linting and then type checking. You start by always discussing linting first, but halfway through switch to discussing type checking first. Keeping this consistent will help the reader keep their bearings throughout.

Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking really good. I just did one last pass to make sure that all the headings are in sentence case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Implementing
Development

Successfully merging this pull request may close these issues.

Blog post on why to use ESLint with TypeScript
3 participants